<template>
  <!-- 头部 -->
  <header>
    <img class="bcimg" :src="detaillist.img" alt="" />
    <!-- 头部图标标签 -->

    <div class="icon-wrap">
      <div class="icon-l" @click="goback">
        <img :src="require('../assets/img/consultdet/组 3@2x(4).png')" alt="" />
      </div>
      <div class="icon-r">
        <img
          :src="require('../assets/img/consultdet/组 3@2x(1).png')"
          alt=""
          class="img-m"
        />
        <img :src="require('../assets/img/consultdet/组 3@2x.png')" alt="" />
      </div>
    </div>
    <!-- 信息 -->
    <div class="info-wrap">
      <h3>{{ detaillist.name }}</h3>
      <p>{{ detaillist.project }}</p>
      <div class="info">
        <div class="info-l">
          <span v-for="(item, index) in detaillist.type" :key="index">{{
            item
          }}</span>
        </div>
        <div class="info-r">
          <span>粉丝{{ detaillist.fans }}</span
          >|
          <span>访客数{{ detaillist.fwsc }}</span>
        </div>
      </div>
    </div>
  </header>
  <!-- 内容 -->
  <div class="content-wrap">
    <div class="content-t">
      <div class="ct-l">
        <span>{{ detaillist.pj }}</span>
        <van-rate v-model="detaillist.pj" allow-half readonly size="12px" />
        <p>{{ detaillist.fwsc }}人评价<van-icon name="arrow" /></p>
      </div>
      <div class="ct-r">
        <div>
          <p>{{ detaillist.cznx }}</p>
          <span>持证年限</span>
        </div>
        <div>
          <p>{{ detaillist.bzrs }}</p>
          <span>帮助人数</span>
        </div>
        <div>
          <p>{{ detaillist.fwsc }}</p>
          <span>服务时长(小时)</span>
        </div>
      </div>
    </div>
    <van-cell title="壹点灵平台保障" is-link to="index"></van-cell>
    <div class="spanvalue">
      <span v-for="(item, index) in tiptwo" :key="index">{{ item }}</span>
    </div>
    <van-tabs v-model="active" animated swipeable>
      <van-tab :title="item" v-for="(item, index) in tipone" :key="index">
        <!--渲染内容-->
        <div class="render-wrap">
          <van-list
            v-model:loading="state1.loading"
            loading-text="加载中..."
            :finished="state1.finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell>
              <li v-for="(item, index) in state1.list" :key="index">
                <div class="info-l">
                  <b>{{ item.title }}</b>
                  <div>
                    <span class="price">￥{{ item.price }}</span>
                    <span>/30分钟</span>
                    <span>好评率</span>
                    <span class="percent">100%</span>
                  </div>
                </div>
                <div class="info-r">
                  <span class="btn-t">预约</span>
                  <span>销售量{{ item.cell }}</span>
                </div>
              </li>
            </van-cell>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <!--底部内容-->
  <div class="footer">
    <div>
      <van-icon name="back-top" />
      <span>顶部</span>
    </div>
    <div>
      <van-icon name="like-o" />
      <span>关注</span>
    </div>
    <button class="btn-t" @click="tochat">私聊</button>
    <button class="btn-s"><van-icon name="arrow-up" />查看服务</button>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { computed, onMounted, reactive } from "vue";
let ids = null;
export default {
  props: ["id"],
  data() {
    return {
      // value:0,
      active: 0,
    };
  },
  beforeMount() {
    ids = this.id;
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    const tipone = reactive(["服务", "评价", "介绍", "解答", "专栏"]);
    const tiptwo = reactive([
      "全部",
      "恋爱情感",
      "情绪压力",
      "婚姻家庭",
      "职场发展",
    ]);
    const detaillist = reactive(computed(() => store.state.Home.detaillist));
    const getdetaillist = () => store.dispatch("getdetaillist", { id: ids });
    onMounted(() => {
      // console.log(ids);
      getdetaillist();
    });
    // 上拉加载
    const state1 = reactive({
      loading: true,
      finished: false,
      list: [],
    });
    const onLoad = () => {
      let timer = null;
      clearTimeout(timer);
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      timer = setTimeout(() => {
        // state1.list.push(detaillist.value.servelist.slice(state1.list.length,state1.list.length+2)[0]);
        state1.list = state1.list.concat(
          detaillist.value.servelist.slice(
            state1.list.length,
            state1.list.length + 3
          )[0]
        );

        // 加载状态结束
        state1.loading = false;
        // 数据全部加载完成
        if (state1.list.length >= 7) {
          state1.finished = true;
        }
      }, 1000);
    };

    //返回首页方法
    const goback = () => {
      router.go(-1);
    };
    const tochat = () => {
      router.push("/chat");
    };
    return {
      tipone,
      tiptwo,
      onMounted,
      goback,
      router,
      detaillist,
      getdetaillist,
      state1,
      onLoad,
      tochat,
    };
  },
};
</script>

<style lang="less" scoped>
.spanvalue {
  position: absolute;
  top: 155px;
  left: 15px;
  z-index: 999;
  span {
    width: 55px;
    font-size: 12px;
    display: inline-block;
    padding: 0 3px 0 3px;
    background: #ebf6ff;
    border-radius: 15px;
    text-align: center;
    margin-left: 7px;
    color: #469deb;
  }
}
/deep/.van-tab--active {
  font-weight: 900;
  font-size: 16px;
}
/deep/.van-tabs__wrap {
  height: 70px;
  border-bottom: 1px solid #ccc;
}
/deep/.van-tabs__line {
  height: 0px;
}
/deep/.van-tab__pane {
  margin-top: 20px;
}

header {
  .bcimg {
    width: 100%;
    height: 410px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -19;
  }
  width: 100%;
  height: 410px;
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  padding: 10px;

  // 图标部分
  .icon-wrap {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-l,
    .icon-r {
      height: 100%;
      display: flex;
      align-items: center;
    }
    img {
      width: 32px;
      height: 32px;
    }
    .img-m {
      margin-top: 4px;
    }
  }
  .info-wrap {
    width: 100%;
    color: #fff;
    position: absolute;
    top: 242px;
    left: 0px;
    box-sizing: border-box;
    padding: 10px;
    h3 {
      font-size: 24px;
      margin: 0;
    }
    p {
      font-size: 16px;
      margin: 5px 0 5px 0;
    }
    .info {
      width: 100%;
      display: flex;
      font-size: 12px;
      justify-content: space-between;

      .info-l {
        span {
          background: #72757c;
          margin-right: 10px;
        }
      }
      .info-r {
        span {
          margin-right: 5px;
        }
      }
    }
  }
}
.content-wrap {
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  width: 100%;
  position: absolute;
  left: 0;
  top: 335px;
  border-radius: 10px 10px 0 0;

  .content-t {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    .ct-l {
      span {
        font-size: 16px;
        font-weight: 900;
        color: #eb5d4a;
      }
    }
    .ct-r {
      width: 200px;
      display: flex;
      text-align: center;
      display: flex;
      justify-content: space-between;
      p {
        font-size: 16px;
        font-weight: 900;
        margin: 6px;
      }
    }
  }
  .render-wrap {
    width: 100%;
    margin-bottom: 60px;
    li {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      .info-l {
        width: 250px;
        // height: 50px;
        b {
          font-size: 16px;
          margin: 0;
        }
        span {
          font-size: 12px;
          color: #adadad;
        }
        .price {
          color: #eb5e4b;
          font-size: 16px;
          font-weight: 900;
        }
        span:nth-child(3) {
          margin-left: 10px;
        }
        .percent {
          color: #000;
          margin-left: 5px;
        }
      }
      .info-r {
        width: 70px;
        // height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        span {
          font-size: 12px;
          color: #adadad;
          text-align: center;
        }
        .btn-t {
          width: 68px;
          height: 28px;
          background: #f8da4e;
          border-radius: 14px;
          font-size: 15px;
          text-align: center;
          line-height: 28px;
          color: #000;
        }
      }
    }
  }
}
.footer {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  background-color: #fff;
  left: 0;
  bottom: 0;
  div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 16px;
    text-align: center;
  }
  button {
    font-size: 20px;
    width: 120px;
    height: 40px;
    border-radius: 4px;
  }
  .btn-t {
    border: 1px solid #4c9eeb;
    color: #4c9eeb;
    background: #eaf5fe;
  }
  .btn-s {
    background: #4c9eeb;
    color: #fff;
    border: none;
  }
}
</style>
